import { useState, useEffect } from 'react';
import { Tabs, Radio, InputNumber, Select, Input, Modal, App } from 'antd';

const { Option } = Select;

// 解析秒部分
const parseSecondsPart = (part) => {
  const result = {
    cronEvery: "1",
    incrementStart: 3,
    incrementIncrement: 5,
    rangeStart: 0,
    rangeEnd: 0,
    specificSpecific: [],
  };

  return parseCommonPart(part, result);
};

// 解析分钟部分
const parseMinutesPart = (part) => {
  const result = {
    cronEvery: "1",
    incrementStart: 3,
    incrementIncrement: 5,
    rangeStart: 0,
    rangeEnd: 0,
    specificSpecific: [],
  };

  return parseCommonPart(part, result);
};

// 解析小时部分
const parseHoursPart = (part) => {
  const result = {
    cronEvery: "1",
    incrementStart: 3,
    incrementIncrement: 5,
    rangeStart: 0,
    rangeEnd: 0,
    specificSpecific: [],
  };

  return parseCommonPart(part, result);
};

// 解析天部分
const parseDaysPart = (part) => {
  const result = {
    cronEvery: "1",
    incrementStart: 1,
    incrementIncrement: 1,
    rangeStart: 1,
    rangeEnd: 31,
    specificSpecific: [],
    cronDaysBeforeEomMinus: 1,
    cronDaysNearestWeekday: 1,
  };

  // 处理 * 情况
  if (part === '*') {
    result.cronEvery = "1";
    return result;
  }

  // 处理 ? 情况
  if (part === '?') {
    result.cronEvery = "2";
    return result;
  }

  // 处理间隔 x/y
  if (part.includes('/')) {
    const [start, increment] = part.split('/');
    if (!isNaN(start) && !isNaN(increment)) {
      result.cronEvery = "3";
      result.incrementStart = parseInt(start);
      result.incrementIncrement = parseInt(increment);
      return result;
    }
  }

  // 处理 W 情况（工作日）
  if (part.includes('W')) {
    const day = part.replace('W', '');
    if (!isNaN(day)) {
      result.cronEvery = "8";
      result.cronDaysNearestWeekday = parseInt(day);
      return result;
    }
  }

  // 处理具体值（逗号分隔）
  if (part.includes(',')) {
    const values = part.split(',').map(v => {
      const num = parseInt(v);
      return isNaN(num) ? v : num.toString();
    });
    result.cronEvery = "4";
    result.specificSpecific = values;
    return result;
  }

  const num = parseInt(part);
  if (!isNaN(num)) {
    result.cronEvery = "4";
    result.specificSpecific = [part];
    return result;
  }

  // 处理 L 情况
  if (part === 'L') {
    result.cronEvery = "5";
    return result;
  }

  // 处理 LW 情况
  if (part === 'LW') {
    result.cronEvery = "6";
    return result;
  }

  // 处理 L- 情况
  if (part.startsWith('L-')) {
    const num = part.replace('L-', '');
    if (!isNaN(num)) {
      result.cronEvery = "7";
      result.cronDaysBeforeEomMinus = parseInt(num);
      return result;
    }
  }

};

// 解析月部分
const parseMonthsPart = (part) => {
  const result = {
    cronEvery: "1",
    incrementStart: 3,
    incrementIncrement: 5,
    rangeStart: 1,
    rangeEnd: 12,
    specificSpecific: [],
  };

  return parseCommonPart(part, result);
};

// 解析周部分
const parseWeeksPart = (part) => {
  const result = {
    cronEvery: "2", // 默认不指定
    specificSpecific: [],
    cronLastSpecificDomDay: 1,
    incrementStart: 1,
    incrementIncrement: 1,
    cronNthDayDay: 1,
    cronNthDayNth: 1,
  };
  // 处理 * 情况
  if (part === '*') {
    result.cronEvery = "1";
    return result;
  }

  // 处理 ? 情况
  if (part === '?') {
    result.cronEvery = "2";
    return result;
  }
  // 处理具体值（逗号分隔）
  if (part.includes(',')) {
    const values = part.split(',').map(v => {
      const num = parseInt(v);
      return isNaN(num) ? v : num.toString();
    });
    result.cronEvery = "3";
    result.specificSpecific = values;
    return result;
  }

  // 处理单个值
  const weeks = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  if (weeks.includes(part)) {
    result.cronEvery = "3";
    result.specificSpecific = [part];
    return result;
  }
  // 处理 L 情况（星期的最后一天）
  if (part.endsWith('L')) {
    const day = part.replace('L', '');
    if (!isNaN(day)) {
      result.cronEvery = "4";
      result.cronLastSpecificDomDay = parseInt(day);
      return result;
    }
  }

  // 处理 # 情况（第几个星期几）
  if (part.includes('#')) {
    const [day, nth] = part.split('#');
    if (!isNaN(day) && !isNaN(nth)) {
      result.cronEvery = "5";
      result.cronNthDayDay = parseInt(day);
      result.cronNthDayNth = parseInt(nth);
      return result;
    }
  }

  return parseCommonPart(part, result);
};

// 解析年部分
const parseYearsPart = (part) => {
  const nowYear = new Date().getFullYear();
  const result = {
    cronEvery: "1",
    incrementStart: nowYear,
    incrementIncrement: 1,
    rangeStart: nowYear,
    rangeEnd: nowYear + 10,
    specificSpecific: [],
  };

  return parseCommonPart(part, result);
};

// 通用解析函数
const parseCommonPart = (part, defaultResult) => {
  const result = { ...defaultResult };

  // 处理 * 情况
  if (part === '*') {
    result.cronEvery = "1";
    return result;
  }

  // 处理范围 x-y
  if (part.includes('-') && !part.includes('/')) {
    const [start, end] = part.split('-');
    if (!isNaN(start) && !isNaN(end)) {
      result.cronEvery = "4";
      result.rangeStart = parseInt(start);
      result.rangeEnd = parseInt(end);
      return result;
    }
  }

  // 处理间隔 x/y
  if (part.includes('/')) {
    const [start, increment] = part.split('/');
    if (!isNaN(start) && !isNaN(increment)) {
      result.cronEvery = "2";
      result.incrementStart = parseInt(start);
      result.incrementIncrement = parseInt(increment);
      return result;
    }
  }

  // 处理具体值（逗号分隔）
  if (part.includes(',')) {
    const values = part.split(',').map(v => {
      const num = parseInt(v);
      return isNaN(num) ? v : num.toString();
    });
    result.cronEvery = "3";
    result.specificSpecific = values;
    return result;
  }

  // 处理单个值
  const num = parseInt(part);
  if (!isNaN(num)) {
    result.cronEvery = "3";
    result.specificSpecific = [part];
    return result;
  }

  // 其他情况保持默认值
  return result;
};

// 解析Cron表达式的函数
const parseCronExpression = (cronExpression) => {
  if (!cronExpression) return null;

  const parts = cronExpression.trim().split(/\s+/);
  if (parts.length < 6 || parts.length > 7) return null; // 标准cron有6-7个部分

  const [seconds, minutes, hours, days, months, weeks, years = "*"] = parts;

  return {
    second: parseSecondsPart(seconds),
    minute: parseMinutesPart(minutes),
    hour: parseHoursPart(hours),
    day: parseDaysPart(days),
    month: parseMonthsPart(months),
    week: parseWeeksPart(weeks),
    year: parseYearsPart(years)
  };
};

const CronEditor = ({ value, onChange }) => {
  const { message } = App.useApp();
  const nowYear = new Date().getFullYear();

  // 初始化状态
  const getInitialState = () => ({
    second: {
      cronEvery: "1",
      incrementStart: 3,
      incrementIncrement: 5,
      rangeStart: 0,
      rangeEnd: 0,
      specificSpecific: [],
    },
    minute: {
      cronEvery: "1",
      incrementStart: 3,
      incrementIncrement: 5,
      rangeStart: 0,
      rangeEnd: 0,
      specificSpecific: [],
    },
    hour: {
      cronEvery: "1",
      incrementStart: 3,
      incrementIncrement: 5,
      rangeStart: 0,
      rangeEnd: 0,
      specificSpecific: [],
    },
    day: {
      cronEvery: "1",
      incrementStart: 1,
      incrementIncrement: 1,
      rangeStart: 1,
      rangeEnd: 31,
      specificSpecific: [],
      cronDaysBeforeEomMinus: 1,
      cronDaysNearestWeekday: 1,
    },
    week: {
      cronEvery: "2", // 默认不指定
      specificSpecific: [],
      cronLastSpecificDomDay: 1,
      incrementStart: 1,
      incrementIncrement: 1,
      cronNthDayDay: 1,
      cronNthDayNth: 1,
    },
    month: {
      cronEvery: "1",
      incrementStart: 3,
      incrementIncrement: 5,
      rangeStart: 1,
      rangeEnd: 12,
      specificSpecific: [],
    },
    year: {
      cronEvery: "1",
      incrementStart: nowYear,
      incrementIncrement: 1,
      rangeStart: nowYear,
      rangeEnd: nowYear + 10,
      specificSpecific: [],
    }
  });

  const [cronState, setCronState] = useState(getInitialState());

  const [isModalVisible, setIsModalVisible] = useState(false);

  // 当外部value变化时，更新内部状态
  useEffect(() => {
    if (value) {
      const parsedState = parseCronExpression(value);
      if (parsedState) {
        setCronState(parsedState);
      }
    } else {
      // 如果没有值，重置为初始状态
      setCronState(getInitialState());
    }
  }, [value]);

  // 计算各部分表达式
  const secondsText = () => {
    let seconds = "";
    switch (cronState.second.cronEvery) {
      case "1":
        seconds = "*";
        break;
      case "2":
        seconds = `${cronState.second.incrementStart}/${cronState.second.incrementIncrement}`;
        break;
      case "3":
        seconds = cronState.second.specificSpecific.join(",");
        break;
      case "4":
        seconds = `${cronState.second.rangeStart}-${cronState.second.rangeEnd}`;
        break;
      default:
        seconds = "*";
    }
    return seconds;
  };

  const minutesText = () => {
    let minutes = "";
    switch (cronState.minute.cronEvery) {
      case "1":
        minutes = "*";
        break;
      case "2":
        minutes = `${cronState.minute.incrementStart}/${cronState.minute.incrementIncrement}`;
        break;
      case "3":
        minutes = cronState.minute.specificSpecific.join(",");
        break;
      case "4":
        minutes = `${cronState.minute.rangeStart}-${cronState.minute.rangeEnd}`;
        break;
      default:
        minutes = "*";
    }
    return minutes;
  };

  const hoursText = () => {
    let hours = "";
    switch (cronState.hour.cronEvery) {
      case "1":
        hours = "*";
        break;
      case "2":
        hours = `${cronState.hour.incrementStart}/${cronState.hour.incrementIncrement}`;
        break;
      case "3":
        hours = cronState.hour.specificSpecific.join(",");
        break;
      case "4":
        hours = `${cronState.hour.rangeStart}-${cronState.hour.rangeEnd}`;
        break;
      default:
        hours = "*";
    }
    return hours;
  };

  // 计算天表达式，确保与周互斥
  const daysText = () => {
    let days = "";
    switch (cronState.day.cronEvery) {
      case "1":
        days = "*";
        break;
      case "2":
        days = "?";
        break;
      case "3":
        days = `${cronState.day.incrementStart}/${cronState.day.incrementIncrement}`;
        break;
      case "4":
        days = cronState.day.specificSpecific.join(",");
        break;
      case "5":
        days = "L";
        break;
      case "6":
        days = "LW";
        break;
      case "7":
        days = `L-${cronState.day.cronDaysBeforeEomMinus}`;
        break;
      case "8":
        days = `${cronState.day.cronDaysNearestWeekday}W`;
        break;
      default:
        days = "*";
    }
    return days;
  };

  // 计算周表达式，确保与天互斥
  const weeksText = () => {
    let weeks = "";
    switch (cronState.week.cronEvery) {
      case "1":
        weeks = "*";
        break;
      case "2":
        weeks = "?";
        break;
      case "3":
        weeks = cronState.week.specificSpecific.join(",");
        break;
      case "4":
        weeks = `${cronState.week.cronLastSpecificDomDay}L`;
        break;
      case "5":
        weeks = `${cronState.week.cronNthDayDay}#${cronState.week.cronNthDayNth}`;
        break;
      default:
        weeks = "?";
    }
    return weeks;
  };

  const monthsText = () => {
    let months = "";
    switch (cronState.month.cronEvery) {
      case "1":
        months = "*";
        break;
      case "2":
        months = `${cronState.month.incrementStart}/${cronState.month.incrementIncrement}`;
        break;
      case "3":
        months = cronState.month.specificSpecific.join(",");
        break;
      case "4":
        months = `${cronState.month.rangeStart}-${cronState.month.rangeEnd}`;
        break;
      default:
        months = "*";
    }
    return months;
  };

  const yearsText = () => {
    let years = "";
    switch (cronState.year.cronEvery) {
      case "1":
        years = "*";
        break;
      case "2":
        years = `${cronState.year.incrementStart}/${cronState.year.incrementIncrement}`;
        break;
      case "3":
        years = cronState.year.specificSpecific.join(",");
        break;
      case "4":
        years = `${cronState.year.rangeStart}-${cronState.year.rangeEnd}`;
        break;
      default:
        years = "*";
    }
    return years;
  };

  // 生成完整的cron表达式
  const cronExpression = () => {
    return `${secondsText()} ${minutesText()} ${hoursText()} ${daysText()} ${monthsText()} ${weeksText()} ${yearsText()}`;
  };

  // 当cron表达式改变时通知父组件
  useEffect(() => {
    if (onChange) {
      onChange(cronExpression());
    }
  }, [cronState]);

  // 处理日选项点击
  const handleDayClick = (val) => {
    // 如果日指定了值，则周指定值为不指定
    if (val !== "2") {
      setCronState(prev => ({
        ...prev,
        week: {
          ...prev.week,
          cronEvery: "2"
        }
      }));
    } else {
      setCronState(prev => ({
        ...prev,
        week: {
          ...prev.week,
          cronEvery: "1"
        }
      }));
    }
  };

  // 处理周选项点击
  const handleWeekClick = (val) => {
    // 如果周指定了值，则日指定值为不指定
    if (val !== "2") {
      setCronState(prev => ({
        ...prev,
        day: {
          ...prev.day,
          cronEvery: "2"
        }
      }));
    } else {
      setCronState(prev => ({
        ...prev,
        day: {
          ...prev.day,
          cronEvery: "1"
        }
      }));
    }
  };


  const selectBeforeDelete = (part, value) => {
    if (
      Array.isArray(cronState[part].specificSpecific) &&
      cronState[part].specificSpecific.length === 1 &&
      value.length < cronState[part].specificSpecific.length
    ) {
      return false;
    }
    return true;
  };
  // 更新状态的辅助函数
  const updateCronState = (part, field, subField, val) => {
    // 确保传递给 Select 组件的 value 是正确的类型
    let processedValue = val;

    // 当切换到多选选项时，如果specificSpecific为空，则设置默认值
    if (field === 'cronEvery') {
      const newState = { ...cronState };
      newState[part][field] = val;

      // 检查是否切换到多选选项并且specificSpecific为空
      if (
        (part === 'second' && val === '3' && (!newState[part].specificSpecific || newState[part].specificSpecific.length === 0)) ||
        (part === 'minute' && val === '3' && (!newState[part].specificSpecific || newState[part].specificSpecific.length === 0)) ||
        (part === 'hour' && val === '3' && (!newState[part].specificSpecific || newState[part].specificSpecific.length === 0)) ||
        (part === 'day' && val === '4' && (!newState[part].specificSpecific || newState[part].specificSpecific.length === 0)) ||
        (part === 'month' && val === '3' && (!newState[part].specificSpecific || newState[part].specificSpecific.length === 0)) ||
        (part === 'week' && val === '3' && (!newState[part].specificSpecific || newState[part].specificSpecific.length === 0)) ||
        (part === 'year' && val === '3' && (!newState[part].specificSpecific || newState[part].specificSpecific.length === 0))
      ) {
        switch (part) {
          case 'second':
          case 'minute':
          case 'hour':
            newState[part].specificSpecific = ['0'];
            break;
          case 'day':
          case 'month':
            newState[part].specificSpecific = ['1'];
            break;
          case 'week':
            newState[part].specificSpecific = ['SUN'];
            break;
          case 'year':
            newState[part].specificSpecific = [nowYear.toString()];
            break;
          default:
            break;
        }
      }

      setCronState(newState);
      return;
    }

    setCronState(prev => ({
      ...prev,
      [part]: {
        ...prev[part],
        [field]: subField ? {
          ...prev[part][field],
          [subField]: processedValue
        } : processedValue
      }
    }));
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
    if (onChange) {
      onChange(cronExpression());
    }
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Input
        value={value || cronExpression()}
        readOnly
        style={{ width: '100%' }}
        onClick={showModal}
        placeholder="点击选择Cron表达式"
      />
      <Modal
        title="Cron表达式编辑器"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={800}
        maskClosable={false}
      >
        <div>
          {/* 结果显示区域 */}
          <div style={{ margin: '0px', padding: '5px',textAlign: 'center' }}>
            <Input
              value={cronExpression()}
              readOnly
              style={{ width: '50%' }}
            />
          </div>
          <Tabs
            defaultActiveKey="1"
            items={[
              {
                key: '1',
                label: '秒',
                children: (
                  <div style={{ padding: '10px' }}>
                    <Radio.Group
                      onChange={e => updateCronState('second', 'cronEvery', null, e.target.value)}
                      value={cronState.second.cronEvery}
                    >
                      <Radio value="1" style={{ display: 'block', marginBottom: '10px' }}>每一秒钟</Radio>
                      <Radio value="2" style={{ display: 'block', marginBottom: '10px' }}>
                        每隔
                        <InputNumber
                          min={1}
                          max={60}
                          value={cronState.second.incrementIncrement}
                          onChange={value => updateCronState('second', 'incrementIncrement', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        秒执行 从
                        <InputNumber
                          min={0}
                          max={59}
                          value={cronState.second.incrementStart}
                          onChange={value => updateCronState('second', 'incrementStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        秒开始
                      </Radio>
                      <Radio value="3" style={{ display: 'block', marginBottom: '10px' }}>
                        具体秒数(可多选)
                      </Radio>
                      <Select
                        disabled={cronState.second.cronEvery !== '3'}
                        mode="multiple"
                        style={{ width: '100%', marginBottom: '10px' }}
                        placeholder="请选择"
                        value={cronState.second.cronEvery === '3' ?
                          (Array.isArray(cronState.second.specificSpecific) && cronState.second.specificSpecific.length > 0 ?
                            cronState.second.specificSpecific : ['0']) : []}
                        onChange={value => {
                          if (selectBeforeDelete('second', value)) {
                            updateCronState('second', 'specificSpecific', null, value)
                          } else {
                            message.warning('确保cron表达式正确,选择值必须有一项');
                          }
                        }}
                      >
                        {Array.from({ length: 60 }, (_, i) => (
                          <Option key={i} value={i.toString()}>{i}</Option>
                        ))}
                      </Select>
                      <Radio value="4" style={{ display: 'block', marginBottom: '10px' }}>
                        周期从
                        <InputNumber
                          min={0}
                          max={59}
                          value={cronState.second.rangeStart}
                          onChange={value => updateCronState('second', 'rangeStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        到
                        <InputNumber
                          min={0}
                          max={59}
                          value={cronState.second.rangeEnd}
                          onChange={value => updateCronState('second', 'rangeEnd', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        秒
                      </Radio>
                    </Radio.Group>
                  </div>
                )
              },
              {
                key: '2',
                label: '分',
                children: (
                  <div style={{ padding: '10px' }}>
                    <Radio.Group
                      onChange={e => updateCronState('minute', 'cronEvery', null, e.target.value)}
                      value={cronState.minute.cronEvery}
                    >
                      <Radio value="1" style={{ display: 'block', marginBottom: '10px' }}>每一分钟</Radio>
                      <Radio value="2" style={{ display: 'block', marginBottom: '10px' }}>
                        每隔
                        <InputNumber
                          min={1}
                          max={60}
                          value={cronState.minute.incrementIncrement}
                          onChange={value => updateCronState('minute', 'incrementIncrement', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        分执行 从
                        <InputNumber
                          min={0}
                          max={59}
                          value={cronState.minute.incrementStart}
                          onChange={value => updateCronState('minute', 'incrementStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        分开始
                      </Radio>
                      <Radio value="3" style={{ display: 'block', marginBottom: '10px' }}>
                        具体分钟数(可多选)
                      </Radio>
                      <Select
                        disabled={cronState.minute.cronEvery !== '3'}
                        mode="multiple"
                        style={{ width: '100%', marginBottom: '10px' }}
                        placeholder="请选择"
                        value={cronState.minute.cronEvery === '3' ?
                          (Array.isArray(cronState.minute.specificSpecific) && cronState.minute.specificSpecific.length > 0 ?
                            cronState.minute.specificSpecific : ['0']) : []}
                        onChange={value => {
                          if (selectBeforeDelete('minute', value)) {
                            updateCronState('minute', 'specificSpecific', null, value)
                          } else {
                            message.warning('确保cron表达式正确,选择值必须有一项');
                          }
                        }}

                      >
                        {Array.from({ length: 60 }, (_, i) => (
                          <Option key={i} value={i.toString()}>{i}</Option>
                        ))}
                      </Select>
                      <Radio value="4" style={{ display: 'block', marginBottom: '10px' }}>
                        周期从
                        <InputNumber
                          min={0}
                          max={59}
                          value={cronState.minute.rangeStart}
                          onChange={value => updateCronState('minute', 'rangeStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        到
                        <InputNumber
                          min={0}
                          max={59}
                          value={cronState.minute.rangeEnd}
                          onChange={value => updateCronState('minute', 'rangeEnd', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        分
                      </Radio>
                    </Radio.Group>
                  </div>
                )
              },
              {
                key: '3',
                label: '时',
                children: (
                  <div style={{ padding: '10px' }}>
                    <Radio.Group
                      onChange={e => updateCronState('hour', 'cronEvery', null, e.target.value)}
                      value={cronState.hour.cronEvery}
                    >
                      <Radio value="1" style={{ display: 'block', marginBottom: '10px' }}>每一小时</Radio>
                      <Radio value="2" style={{ display: 'block', marginBottom: '10px' }}>
                        每隔
                        <InputNumber
                          min={0}
                          max={23}
                          value={cronState.hour.incrementIncrement}
                          onChange={value => updateCronState('hour', 'incrementIncrement', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        小时执行 从
                        <InputNumber
                          min={0}
                          max={23}
                          value={cronState.hour.incrementStart}
                          onChange={value => updateCronState('hour', 'incrementStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        小时开始
                      </Radio>
                      <Radio value="3" style={{ display: 'block', marginBottom: '10px' }}>
                        具体小时数(可多选)
                      </Radio>
                      <Select
                        disabled={cronState.hour.cronEvery !== '3'}
                        mode="multiple"
                        style={{ width: '100%', marginBottom: '10px' }}
                        placeholder="请选择"
                        value={cronState.hour.cronEvery === '3' ?
                          (Array.isArray(cronState.hour.specificSpecific) && cronState.hour.specificSpecific.length > 0 ?
                            cronState.hour.specificSpecific : ['0']) : []}
                        onChange={value => {
                          if (selectBeforeDelete('hour', value)) {
                            updateCronState('hour', 'specificSpecific', null, value)
                          } else {
                            message.warning('确保cron表达式正确,选择值必须有一项');
                          }
                        }}

                      >
                        {Array.from({ length: 24 }, (_, i) => (
                          <Option key={i} value={i.toString()}>{i}</Option>
                        ))}
                      </Select>
                      <Radio value="4" style={{ display: 'block', marginBottom: '10px' }}>
                        周期从
                        <InputNumber
                          min={0}
                          max={23}
                          value={cronState.hour.rangeStart}
                          onChange={value => updateCronState('hour', 'rangeStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        到
                        <InputNumber
                          min={0}
                          max={23}
                          value={cronState.hour.rangeEnd}
                          onChange={value => updateCronState('hour', 'rangeEnd', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        小时
                      </Radio>
                    </Radio.Group>
                  </div>
                )
              },
              {
                key: '4',
                label: '天',
                children: (
                  <div style={{ padding: '10px' }}>
                    <Radio.Group
                      onChange={e => {
                        updateCronState('day', 'cronEvery', null, e.target.value);
                        handleDayClick(e.target.value);
                      }}
                      value={cronState.day.cronEvery}
                    >
                      <Radio value="1" style={{ display: 'block', marginBottom: '10px' }}>每一天</Radio>
                      <Radio value="2" style={{ display: 'block', marginBottom: '10px' }}>不指定</Radio>
                      <Radio value="3" style={{ display: 'block', marginBottom: '10px' }}>
                        每隔
                        <InputNumber
                          min={1}
                          max={31}
                          value={cronState.day.incrementIncrement}
                          onChange={value => updateCronState('day', 'incrementIncrement', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        天执行 从
                        <InputNumber
                          min={1}
                          max={31}
                          value={cronState.day.incrementStart}
                          onChange={value => updateCronState('day', 'incrementStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        日开始
                      </Radio>
                      <Radio value="4" style={{ display: 'block', marginBottom: '10px' }}>
                        具体天数(可多选)
                      </Radio>
                      <Select
                        disabled={cronState.day.cronEvery !== '4'}
                        mode="multiple"
                        style={{ width: '100%', marginBottom: '10px' }}
                        placeholder="请选择"
                        value={cronState.day.cronEvery === '4' ?
                          (Array.isArray(cronState.day.specificSpecific) && cronState.day.specificSpecific.length > 0 ?
                            cronState.day.specificSpecific : ['1']) : []}
                        onChange={value => {
                          if (selectBeforeDelete('day', value)) {
                            updateCronState('day', 'specificSpecific', null, value)
                          } else {
                            message.warning('确保cron表达式正确,选择值必须有一项');
                          }
                        }}
                        onClick={(e) => e.stopPropagation()}
                      >
                        {Array.from({ length: 31 }, (_, i) => (
                          <Option key={i + 1} value={(i + 1).toString()}>{i + 1}</Option>
                        ))}
                      </Select>
                      <Radio value="5" style={{ display: 'block', marginBottom: '10px' }}>在这个月的最后一天</Radio>
                      <Radio value="6" style={{ display: 'block', marginBottom: '10px' }}>在这个月的最后一个工作日</Radio>
                      <Radio value="7" style={{ display: 'block', marginBottom: '10px' }}>
                        在本月底前
                        <InputNumber
                          min={1}
                          max={31}
                          value={cronState.day.cronDaysBeforeEomMinus}
                          onChange={value => updateCronState('day', 'cronDaysBeforeEomMinus', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        天
                      </Radio>
                      <Radio value="8" style={{ display: 'block', marginBottom: '10px' }}>
                        最近的工作日（周一至周五）至本月
                        <InputNumber
                          min={1}
                          max={31}
                          value={cronState.day.cronDaysNearestWeekday}
                          onChange={value => updateCronState('day', 'cronDaysNearestWeekday', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        日
                      </Radio>
                    </Radio.Group>
                  </div>
                )
              },
              {
                key: '5',
                label: '月',
                children: (
                  <div style={{ padding: '10px' }}>
                    <Radio.Group
                      onChange={e => updateCronState('month', 'cronEvery', null, e.target.value)}
                      value={cronState.month.cronEvery}
                    >
                      <Radio value="1" style={{ display: 'block', marginBottom: '10px' }}>每一月</Radio>
                      <Radio value="2" style={{ display: 'block', marginBottom: '10px' }}>
                        每隔
                        <InputNumber
                          min={1}
                          max={12}
                          value={cronState.month.incrementIncrement}
                          onChange={value => updateCronState('month', 'incrementIncrement', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        月执行 从
                        <InputNumber
                          min={1}
                          max={12}
                          value={cronState.month.incrementStart}
                          onChange={value => updateCronState('month', 'incrementStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        月开始
                      </Radio>
                      <Radio value="3" style={{ display: 'block', marginBottom: '10px' }}>
                        具体月数(可多选)
                      </Radio>
                      <Select
                        disabled={cronState.month.cronEvery !== '3'}
                        mode="multiple"
                        style={{ width: '100%', marginBottom: '10px' }}
                        placeholder="请选择"
                        value={cronState.month.cronEvery === '3' ?
                          (Array.isArray(cronState.month.specificSpecific) && cronState.month.specificSpecific.length > 0 ?
                            cronState.month.specificSpecific : ['1']) : []}
                        onChange={value => {
                          if (selectBeforeDelete('month', value)) {
                            updateCronState('month', 'specificSpecific', null, value)
                          } else {
                            message.warning('确保cron表达式正确,选择值必须有一项');
                          }
                        }}

                      >
                        {Array.from({ length: 12 }, (_, i) => (
                          <Option key={i + 1} value={(i + 1).toString()}>{i + 1}</Option>
                        ))}
                      </Select>
                      <Radio value="4" style={{ display: 'block', marginBottom: '10px' }}>
                        从
                        <InputNumber
                          min={1}
                          max={12}
                          value={cronState.month.rangeStart}
                          onChange={value => updateCronState('month', 'rangeStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        月到
                        <InputNumber
                          min={1}
                          max={12}
                          value={cronState.month.rangeEnd}
                          onChange={value => updateCronState('month', 'rangeEnd', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        月之间的每个月
                      </Radio>
                    </Radio.Group>
                  </div>
                )
              },
              {
                key: '6',
                label: '周',
                children: (
                  <div style={{ padding: '10px' }}>
                    <Radio.Group
                      onChange={e => {
                        updateCronState('week', 'cronEvery', null, e.target.value);
                        handleWeekClick(e.target.value);
                      }}
                      value={cronState.week.cronEvery}
                    >
                      <Radio value="1" style={{ display: 'block', marginBottom: '10px' }}>每一周的每一天</Radio>
                      <Radio value="2" style={{ display: 'block', marginBottom: '10px' }}>不指定</Radio>
                      <Radio value="3" style={{ display: 'block', marginBottom: '10px' }}>
                        具体星期几(可多选)
                      </Radio>
                      <Select
                        disabled={cronState.week.cronEvery !== '3'}
                        mode="multiple"
                        style={{ width: '100%', marginBottom: '10px' }}
                        placeholder="请选择"
                        value={cronState.week.cronEvery === '3' ?
                          (Array.isArray(cronState.week.specificSpecific) && cronState.week.specificSpecific.length > 0 ?
                            cronState.week.specificSpecific : ['SUN']) : []}
                        onChange={value => {
                          if (selectBeforeDelete('week', value)) {
                            updateCronState('week', 'specificSpecific', null, value)
                          } else {
                            message.warning('确保cron表达式正确,选择值必须有一项');
                          }
                        }}
                        onClick={(e) => e.stopPropagation()}
                      >
                        {['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'].map((label, i) => (
                          <Option key={i} value={['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][i]}>{label}</Option>
                        ))}
                      </Select>
                      <Radio value="4" style={{ display: 'block', marginBottom: '10px' }}>
                        在这个月的最后一个
                      </Radio>
                      <Select
                        style={{ width: '100%', marginBottom: '10px' }}
                        disabled={cronState.week.cronEvery !== '4'}
                        value={cronState.week.cronLastSpecificDomDay}
                        onChange={value => updateCronState('week', 'cronLastSpecificDomDay', null, value)}
                      >
                        {['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'].map((label, i) => (
                          <Option key={i + 1} value={i + 1}>{label}</Option>
                        ))}
                      </Select>
                      <Radio value="5" style={{ display: 'block', marginBottom: '10px' }}>
                        在第
                        <InputNumber
                          min={1}
                          max={5}
                          value={cronState.week.cronNthDayNth}
                          onChange={value => updateCronState('week', 'cronNthDayNth', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        周的
                      </Radio>
                      <Select
                        style={{ width: '100%', marginBottom: '10px' }}
                        disabled={cronState.week.cronEvery !== '5'}
                        value={cronState.week.cronNthDayDay}
                        onChange={value => updateCronState('week', 'cronNthDayDay', null, value)}
                      >
                        {['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'].map((label, i) => (
                          <Option key={i + 1} value={i + 1}>{label}</Option>
                        ))}
                      </Select>
                    </Radio.Group>
                  </div>
                )
              },
              {
                key: '7',
                label: '年',
                children: (
                  <div style={{ padding: '10px' }}>
                    <Radio.Group
                      onChange={e => updateCronState('year', 'cronEvery', null, e.target.value)}
                      value={cronState.year.cronEvery}
                    >
                      <Radio value="1" style={{ display: 'block', marginBottom: '10px' }}>每一年</Radio>
                      <Radio value="2" style={{ display: 'block', marginBottom: '10px' }}>
                        每隔
                        <InputNumber
                          min={1}
                          max={99}
                          value={cronState.year.incrementIncrement}
                          onChange={value => updateCronState('year', 'incrementIncrement', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        年执行 从
                        <InputNumber
                          min={nowYear}
                          max={2125}
                          value={cronState.year.incrementStart}
                          onChange={value => updateCronState('year', 'incrementStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        年开始
                      </Radio>
                      <Radio value="3" style={{ display: 'block', marginBottom: '10px' }}>
                        具体年份(可多选)
                      </Radio>
                      <Select
                        disabled={cronState.year.cronEvery !== '3'}
                        mode="multiple"
                        style={{ width: '100%', marginBottom: '10px' }}
                        placeholder="请选择"
                        value={cronState.year.cronEvery === '3' ?
                          (Array.isArray(cronState.year.specificSpecific) && cronState.year.specificSpecific.length > 0 ?
                            cronState.year.specificSpecific : [nowYear.toString()]) : []}
                        onChange={value => {
                          if (selectBeforeDelete('year', value)) {
                            updateCronState('year', 'specificSpecific', null, value)
                          } else {
                            message.warning('确保cron表达式正确,选择值必须有一项');
                          }
                        }}

                      >
                        {Array.from({ length: 100 }, (_, i) => {
                          const year = nowYear + i;
                          return <Option key={year} value={year.toString()}>{year}</Option>;
                        })}
                      </Select>
                      <Radio value="4" style={{ display: 'block', marginBottom: '10px' }}>
                        从
                        <InputNumber
                          min={nowYear}
                          max={2125}
                          value={cronState.year.rangeStart}
                          onChange={value => updateCronState('year', 'rangeStart', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        年到
                        <InputNumber
                          min={nowYear}
                          max={2125}
                          value={cronState.year.rangeEnd}
                          onChange={value => updateCronState('year', 'rangeEnd', null, value)}
                          style={{ margin: '0 8px', width: '80px' }}
                        />
                        年之间的每一年
                      </Radio>
                    </Radio.Group>
                  </div>
                )
              }
            ]}
          />
        </div>
      </Modal>
    </>
  );
};

export default CronEditor;